* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

#header {
    height: 150px;
    border: 1px solid;
}

#header .h_centre {
    width: 1200px;
    height: 140px;
    margin: 0 auto;
}

#header .h_centre .img_left {
    float: left;
    height: 140px;
    width: 92px;
    margin-top: 5px;
}

#header .h_centre .img_right {
    float: right;
    height: 140px;
    width: 46px;
    margin-top: 5px;
}

#header .h_centre p{
    float: left;
    text-align: center;
    width: 880px;
    font-size: 24px;
    border: 1px solid yellow;
    margin-top: 50px;
    margin-left: 80px;
    color: black;
    background: orange;
    padding: 3px;
}

#login_body{
    height: 600px;
    background-image: url("../img/login_bg.jpg");
    background-position: center;
    background-size: 100% 100%;
}

#login_body .login_b_center{
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    position: relative;
}

#login_body .login_bg{
    width: 350px;
    height: 351px;
    background: rgba(255,255,255,0.9);
    position: absolute;
    right: -14px;
    top: 80px;
    padding: 30px;
}

#login_body .box{
    position: absolute;
    right: -20%;
    top: 50%;
    padding: 0px;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 351px;
    background: #111845a6;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 20px 50px rgb(23, 32, 90);
    border: 2px solid #2a3cad;
    color: white;
}

#login_body .box:before{
  content: '';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: rgba(255,255,255,0.1);
  transition:0.5s;
  pointer-events: none;
}

#login_body .box:hover:before{
  left:0%;
  transform: skewX(-5deg);
}

#login_body .box h1 {
    text-align: center;
    top: 5%;
}

#login_body .box .content {
  position:absolute;
  top:5px;
  left:5px;
  right:5px;
  bottom:5px;
  border:1px solid #f0a591;
  padding:20px;
  text-align:left;
  box-shadow: 0 5px 10px rgba(9,0,0,0.5);
}

/* #login_body {
    width: 100%;
    height: 100%;
} */

#login_body .box .border span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
}

#login_body .box .border span:nth-child(1)
{
  transform:rotate(0deg);
}

#login_body .box .border span:nth-child(2)
{
  transform:rotate(90deg);
}

#login_body .box .border span:nth-child(3)
{
  transform:rotate(180deg);
}

#login_body .box .border span:nth-child(4)
{
  transform:rotate(270deg);
}

#login_body .box .border span:before
{
  content: '';
  position: absolute;
  width:100%;
  height: 2px;
  background: #50dfdb;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
  transform:scaleX(0);
  transform-origin: left;
  }
  50%
  {
    transform:scaleX(1);
  transform-origin: left;
  }
  50.1%
  {
    transform:scaleX(1);
  transform-origin: right;
    
  }
  
  100%
  {
    transform:scaleX(0);
  transform-origin: right;
    
  }
} 

#login {
    position: absolute;
}

#login div{
    height: 40px;
    margin-top: 20px;
}

/* #login span{
    width: 40px;
    height: 40px;
    display: inline-block;
    float: left;
    border: 1px gray;
} */

#login .userName span{
    width: 30px;
    height: 40px;
    margin-left: 10px;
    display: inline-block;
    float: left;
    border: 1px gray;
    background-image: url("../img/account.png");
    background-size: 100% 100%;
    animation: initial;
}
#login .password span{
    width: 30px;
    height: 40px;
    margin-left: 10px;
    display: inline-block;
    float: left;
    border: 1px gray;
    background-image: url("../img/passwd.png");
    background-size: 100% 100%;
    animation: initial;
}

#login input{
    width: 80%;
    height: 40px;
    float: left;
    font-size: 20px;
}

#login .login_btn input{
    margin-left: 10%;
    background-color: coral;
    width: 85%;
    border: none;
    color: whitesmoke;
    float: center;
    cursor: pointer;
}
#login .login_btn a:hover{
    color: blue;
    float: left;
    cursor: pointer;
}

#login a {
    color: white;
}

#login .forgot_password {
    text-align: right;
    margin-top: 10px;
    color: white;
}

/* #login_body .box .a_left div{
    position: absolute;
    width: 100%;
}

#login_body .box .a_right div{
    position: absolute;
    width: 100%;
} */

/* #login .div_a {
    position: absolute;
    width: 300px;
    height: 40px;
    text-align: center;
    background: red;
}

#login .div_a .a_left {
    position: absolute;
    margin-top: 5px;
    text-align: left;
    color: white;
    text-decoration:none;
}

#login .div_a a {
    position: absolute;
    margin-top: 5px;
    text-align: right;
    color: white;
    text-decoration:none;
} */